<template>
    <div class="color_picker">
        <div class="color_wrap" v-for="color in colors" :key="color">       
            <div @click="chooseColor(color)" class="color_item"  :style="'background-color:'+color"></div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      colors: [
        "#fff",
        "#000",
        "#9b9b9b",
        "#ff4c62",
        "#fec410",
        "#fdf902",
        "#91c601",
        "#516dfe",
        "#2ccff5",
        "#9c7cff",
        "#00a64c",
        "#cca86d",
        "#f0d881",
        "#ffc4d6",
        "#ff00b2"
      ]
    };
  },
  methods:{
      chooseColor(color){
          this.$emit('choose-color',color);
      }
  }
};
</script>

<style scoped>
.color_picker{
    background-color: #f5f1eb;
    padding: 20px 0;
    border-radius: 20px 20px 0 0;
}
.color_wrap{
    display: block;
    float: left;
    width: 20%;
}
.color_item {
    width: 30px;
    height: 30px;
    margin: 10px auto;
    border-radius: 50%;
}
</style>
